<template>
	<view class="container">
		<view class="header">
			<h1>频道管理</h1>
			<button type="default" @click="AddChannel" v-show="!showForm">添加</button>
		</view>
		<view class="form" v-show="showForm">
			<input type="text" placeholder="newChannel" v-model="newChannel"/> 
			<button type="default" @click="submit">确定</button>
		</view>
		<view class="list" v-for="item in channels">
			{{item}}
		</view>
	</view>
</template>

<script>
	import { channelsList ,addChannel} from "../../common/api.js"
	export default {
		data() {
			return {
				"channels":["头条","体育"],
				"showForm":false,
				"newChannel":''
			}
		},
		methods: {
			AddChannel(){
				this.showForm=!this.showForm
			},
			submit(){
				addChannel(this.newChannel)
				this.showForm=!this.showForm
			}
		},
		onLoad(){
			channelsList().then((res)=>{
			if(res.code=200)
				this.channels=res[1].data.result
			})
		}
	}
</script>

<style>
.header{text-align: center;}
.list{text-align: center;}
</style>
